<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>第一个three.js文件_WebGL三维场景</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
  <!-- <script src="./three.js"></script> -->
  <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    let scene_L = new THREE.Scene();
    let scene_R = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // 创建一个立方体几何对象长宽高
    //长方体 参数：长，宽，高
    let boxGeometry = new THREE.BoxGeometry(100, 100, 100);
    // 球体 参数：半径60  经纬度细分数40,40
    let sphereGeometry = new THREE.SphereGeometry(60, 40, 40);
    // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
    let cylinderGeometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
    // 正八面体
    let octahedronGeometry = new THREE.OctahedronGeometry(50);
    // 正十二面体
    let dodecahedronGeometry = new THREE.DodecahedronGeometry(50);
    // 正二十面体
    let icosahedronGeometry = new THREE.IcosahedronGeometry(50);
    
    //材质对象Material
    let material = new THREE.MeshLambertMaterial({
        color:0x004488,
        opacity:0.9,
        transparent:true
    })
    let material1 = new THREE.MeshPhongMaterial({
        color:0x004488, // 材质颜色
        specular:0x4488ee,  // 反射一个物体特定的镜面高光颜色
        shininess:12 // 影响镜面高光的散射/半径
    })
    let meshes = []
    let groupL = new THREE.Group()
    let groupR = new THREE.Group()
    
    let mesh = new THREE.Mesh(boxGeometry, material); //网格模型对象Mesh
    groupL.add(mesh.clone()); //网格模型添加到场景中
    groupR.add(mesh.clone()); //网格模型添加到场景中
    
    mesh = new THREE.Mesh(sphereGeometry, material1); //网格模型对象Mesh
    groupL.add(mesh.clone()); //网格模型添加到场景中
    groupR.add(mesh.clone()); //网格模型添加到场景中
    
    mesh = new THREE.Mesh(cylinderGeometry, material); //网格模型对象Mesh
    groupL.add(mesh.clone()); //网格模型添加到场景中
    groupR.add(mesh.clone()); //网格模型添加到场景中
    
    mesh = new THREE.Mesh(octahedronGeometry, material); //网格模型对象Mesh
    groupL.add(mesh.clone()); //网格模型添加到场景中
    groupR.add(mesh.clone()); //网格模型添加到场景中
    
    mesh = new THREE.Mesh(dodecahedronGeometry, material); //网格模型对象Mesh
    groupL.add(mesh.clone()); //网格模型添加到场景中
    groupR.add(mesh.clone()); //网格模型添加到场景中
    
    mesh = new THREE.Mesh(icosahedronGeometry, material); //网格模型对象Mesh
    groupL.add(mesh.clone()); //网格模型添加到场景中
    groupR.add(mesh.clone()); //网格模型添加到场景中
    
    // let axisHelper = new THREE.AxesHelper(250);
    scene_L.add(new THREE.AxesHelper(250));
    scene_R.add(new THREE.AxesHelper(250));
    scene_L.add(groupL)
    scene_R.add(groupR)
    /**
     * 光源设置
     */
    //点光源
    let point = new THREE.PointLight(0xffff00);
    point.position.set(400, 200, 300); //点光源位置
    scene_L.add(point); //点光源添加到场景中
    scene_R.add(point.clone()); //点光源添加到场景中
    //环境光
    let ambient = new THREE.AmbientLight(0x444444);
    scene_L.add(ambient);
    scene_R.add(ambient.clone());
    // console.log(scene_L)
    // console.log(scene_L.children)
    /**
     * 相机设置
     */
    let width = window.innerWidth; //窗口宽度
    let height = window.innerHeight; //窗口高度
    let k = width / height; //窗口宽高比
    let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(-20, 300, 200); //设置相机位置
    camera.lookAt(scene_L.position); //设置相机方向(指向的场景对象)
    let camera1 = camera.clone()
    camera1.position.set(20, 300, 200); //设置相机位置
    camera.lookAt(scene_R.position); //设置相机方向(指向的场景对象)

    /**
     * 创建渲染器对象
     */
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    renderer.setScissorTest(true)
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    
    Game = {
		tickLength: 16, 				// 20Hz
		lastTick: performance.now(),	// 最后更新时间
		stopKey: 0,
		canvas: null,
		context: null,
    }
    
    window.onresize = function () {
        let width = window.innerWidth; //窗口宽度
        let height = window.innerHeight; //窗口高度
        renderer.setSize(width, height);//设置渲染区域尺寸

        k = width / height; //窗口宽高比
        //修改相机对象属性
        camera.left = -s * k
        camera.right = s * k
        camera.top = s
        camera.bottom = -s
        camera.aspect = k
        camera.updateProjectionMatrix()
        camera1.left = -s * k
        camera1.right = s * k
        camera1.top = s
        camera1.bottom = -s
        camera1.aspect = k
        camera1.updateProjectionMatrix()
    }

    function render(tFrame) {
        if (tFrame === undefined) {
            tFrame = performance.now()
            Game.lastTick = performance.now()
        }
        let nextTick = Game.lastTick + Game.tickLength
        let tickNum = 0
        if (tFrame > nextTick) {
            tickNum = Math.floor((tFrame - Game.lastTick) / Game.tickLength)
        }
        Game.lastTick = tFrame
        for (let num = 0; num < tickNum; ++num) {
            for (let i = 0, l = groupL.children.length; i < l; ++i) {
              groupL.children[i].position.set((i + 0.5 - l / 2) * 150, 0, 0)
              groupL.children[i].rotateY(3.14 / 180)
            }
            for (let i = 0, l = groupR.children.length; i < l; ++i) {
              groupR.children[i].position.set((i + 0.5 - l / 2) * 150, 0, 0)
              groupR.children[i].rotateY(3.14 / 180)
            }

        }
        //执行渲染操作   指定场景、相机作为参数
        let sliderPos = window.innerWidth / 2
        renderer.setScissor( 0, 0, sliderPos, window.innerHeight )
        renderer.render(scene_L, camera);
        renderer.setScissor(sliderPos, 0, window.innerWidth, window.innerHeight )
        renderer.render(scene_R, camera1);
        // renderer.render(scene_R, camera);
        Game.stopKey = requestAnimationFrame(render)
    }
    render()
    let controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
    let controls1 = new THREE.OrbitControls(camera1,renderer.domElement);//创建控件对象
    // controls.addEventListener('change', render);
   
  </script>
</body>
</html>
